<template>
	<view class="replace-box-page relative font-hanserif-bold">
		<comDetailNavigateBack :title="commonNavTitle" />
		
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />

		<comScrollTab v-if="showTabList" v-model="currentIndex" :list="tabAreaList">
			<scroll-view scroll-y scroll-with-animation :scroll-into-view="boxScrollInto" :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 150rpx)' }">
				<view class="" style="height: 90%;" v-if="isNoBoxLen">
					<comEmptyData></comEmptyData>
				</view>
				<template v-else>
					<view class="info-content margin-auto relative flex flex-justify-content-between"
						v-for="(item, index) of boxesLists"
						:class="item.total_remain_stock_num === 0 ? 'grayscale-disbaled' : ''"
						@click="setCheckBoxFun(item)"
						:key="index"
						:id="`id-${item.box_num}`">
						<image
							class="bg"
							 v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/box-list-bg.png`"
							mode=""
						></image>
						<view class="info-sort absolute flex-all-center">
							<image
								class="bg"
								 v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/box-list-num.png`"
								mode=""
							></image>
							<text class="relative font-hanserif-regular">{{ item.box_num }}</text>
						</view>
						<view class="info-cover flex-all-center relative">
							<image
								class="info-cover-img"
								 v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/box.png`"
								mode=""
							></image>
						</view>
						<view class="info-sums relative">
							<view class="info-total relative">
								<image
									class="bg"
									 v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/right-num-bg.png`"
									mode="heightFix"
									style="right: 0rpx;top: -4rpx;left: unset;"
								></image>
								<view class="relative" :style="item.total_remain_stock_num === 0 ? 'color: #fff;' : 'red'">剩{{ item.total_remain_stock_num }}张</view>
							</view>
							
							<view class="info-detail flex flex-wrap">
								<view class="detail-content flex" v-for="(item, index) of item.box_item_list" :key="index">
									<text class="detail-title text-nowrap">{{ item.reward_item_type }}</text>
									<text :class="['detail-nums', item.remain_stock_num === 0 && item.total_remain_stock_num !== 0 ? 'detail-nums-has' : '']"
										>{{ item.remain_stock_num }}/{{ item.each_box_stock_num }}</text
									>
								</view>
							</view>
						</view>
					</view>
				</template>
			</scroll-view>
		</comScrollTab>
	</view>
</template>

<script>
	import store from '@/store';
	import { boxIndexSetFun } from '@/setupproject/TOOLS_FUN';
	import { geRewardPoolBoxsApi } from '@/setupproject/INTERFACE.js';

	export default {
		name: 'replaceBoxPage',
		data() {
			return {
				commonNavTitle: '换箱',
				boxScrollInto: '',
				currentIndex: 0,
				isNoBoxLen: false,
				reward_pool_id: '',
				boxesLists: [],
				tabAreaList: [],
				isLimit: false, // 是否限定箱
				hasStockIndex: 1, // 当前最新可抽的箱数下标
			};
		},
		watch: {
			currentIndex: {
				handler(v) {
					setTimeout(() => {
						if (this.tabAreaList[v]) {
							this.setChangeBoxFun(this.tabAreaList[v]);
						}
					});
				}
			}
		},
		computed: {
			boxSubIndex() {
				return this.$store.getters.boxSubIndex;
			},
			
			showTabList() {
				return this.tabAreaList.length;
			},
			
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			
			commonConfigs() {
				return store.getters.commonConfigs || {};
			}
		},
		onLoad({ id, num, isLimit = false, hasStockIndex = 1 }) {
			this.reward_pool_id = id;
			
			// 换箱 - 限定模式
			this.isLimit = Boolean(isLimit);
			if(this.isLimit) this.hasStockIndex = hasStockIndex;
			
			const lists = [];
			for (let i = 1; i <= num; i += 10) {
				const end_box_num = i + 9;
				lists.push({
					text: `${i}-${end_box_num}`,
					reward_pool_id: id,
					start_box_num: i,
					end_box_num: end_box_num,
				});
			}
			
			// 换箱 - 限定模式 - 正序
			if(this.isLimit) {
				this.tabAreaList = lists;
			}else{
				this.tabAreaList = lists.reverse();
			}
			
			setTimeout(() => {
				for (let index = 0; index < this.tabAreaList.length; index++) {
					const item = this.tabAreaList[index];
					if (this.boxSubIndex >= item.start_box_num) {
						this.currentIndex = index;
						break;
					}
				}
				this.setChangeBoxFun(this.tabAreaList[this.currentIndex]);
			}, 20);
		},
		methods: {
			
			async setChangeBoxFun({ start_box_num, end_box_num, reward_pool_id, }) {
				const { data } = await geRewardPoolBoxsApi({
					start_box_num,
					end_box_num,
					reward_pool_id,
				});
				
				if (!data.boxs.length) {
					return this.isNoBoxLen = true;
				};
				
				this.isNoBoxLen = false;
				this.boxesLists = data.boxs;

				setTimeout(() => {
					this.boxScrollInto = 'id-' + this.boxSubIndex;
				}, 10);
			},
			
			async setCheckBoxFun(item) {
				// 换箱 - 限定模式
				if(this.isLimit && Number(item.box_num) > Number(this.hasStockIndex)) {
					return uni.showToast({
						icon: 'none',
						title: `最大只能切换到第 ${this.hasStockIndex} 箱！`
					});
				}
				
				await boxIndexSetFun(item.box_num);
				await uni.navigateBack();
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.replace-box-page {
		overflow-y: hidden;
		width: 100%;
		height: 100vh;
		
		.info-content {
			width: 720rpx;
			min-height: 298rpx;
			overflow: hidden;
			margin-bottom: 36rpx;

			.info-sort {
				font-size: 20rpx;
				color: #fff;
				left: 14rpx;
				top: 16rpx;
				width: 48rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-weight: 100;
			}
			
			.info-cover {
				margin: 40rpx 20rpx 20rpx 10rpx;
				width: 287rpx;
				height: 287rpx;
				
				.info-cover-img {
					width: 100%;
					height: 100%;
				}
			}
			
			.info-sums {
				font-size: 26rpx;
				color: #fff;
				margin: 34rpx 0rpx 0 0;
				text-align: right;
				width: 420rpx;
				
				.info-total {
					height: 48rpx;
					color: #3C45FF;
					padding-right: 20rpx;
				}
				
				.info-detail {
					margin-top: 18rpx;
					
					.detail-content {
						margin-bottom: 18rpx;
						margin-left: 48rpx;
						
						.detail-title {
							color: #FFFFFF;
							width: 38rpx;
							text-align: left;
							margin-right: 12rpx;
						}
						
						.detail-nums {
							text-align: right;
							width: 82rpx;
							&.detail-nums-has {
								color: #f00;
								color: #FFFFFF;
							}
						}
						
					}
				}
			}
		}
	}
</style>
